<template>
  <!-- 房屋列表 -->
  <div class="homeClassify">
    <div class="w">
      <div>
        <h3><i class="iconfont icon-home-full"></i>地产分类</h3>
        <el-row type="flex" justify="center" class="classify-card">
          <!-- 循环 -->
          <el-col
            :span="6"
            v-for="item in classifyList"
            :key="item.id"
            @click.native="rollFn()"
          >
            <el-card :body-style="{ padding: '0px' }" class="card-item">
              <img v-customImags :src="item.image" class="image" />
              <div style="padding: 14px">
                <div class="card-content">
                  <h3>{{ item.title }}</h3>
                  <div class="bottom clearfix">
                    <!-- <time class="time">{{ item.updated_at | fliter}}</time> -->
                    <p>内容描述：{{ item.desc }}</p>
                    <p>
                      <span>时间：{{ item.updated_at | fliter }}</span>
                      <span class="attention"
                        ><i class="el-icon-star-off"></i
                      ></span>
                    </p>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!-- 地产列表 -->
      <div id="PropertiesId">
        <h3><i class="iconfont icon-home-full"></i>地产列表</h3>
        <div>
          <el-row
            type="flex"
            class="row-bg"
            justify="center"
            v-for="item in aboutUsList"
            :key="item.id"
            :name="item.title"
            :id="item.id"
          >
            <el-col :span="16">
              <div @click="infoFn(item.id)">
                <img v-customImags :src="item.image" />
                <div class="app-bg"></div>
                <div class="grid-content">
                  <h1>{{ item.title }}</h1>
                  <p>
                    内容介绍:{{ item.desc }}&nbsp;time:<span>{{
                      item.updated_at | fliter
                    }}</span>
                  </p>
                  <p>地址&nbsp;:&nbsp;{{ item.address }}</p>
                </div>
              </div></el-col
            >
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { classifyFn, homelist } from "@/api/home";
export default {
  data() {
    return {
      //地产分类
      classifyList: [],
      params: {
        _limit: "9",
        _start: "0",
        // title_contains: "222",
      },
      //地产列表
      aboutUsParams: {
        _start: "0",
        _limit: "99",
      },
      aboutUsList: {},
    };
  },

  created() {
    this.classifyFn();
    this.homelist();
  },
  methods: {
    //获取地产分类
    async classifyFn() {
      const res = await classifyFn(this.params);
      console.log(3333, res);
      this.classifyList = res.data;
    },
    // 获取房产信息请求
    async homelist() {
      const res = await homelist(this.aboutUsParams);
      console.log(10, res);
      this.aboutUsList = res.data;
    },
    //路由跳转
    infoFn(id) {
      this.$router.push({
        path: "/info",
        query: {
          id,
        },
      });
    },
    //滚动
    rollFn() {
      const id = document.querySelector("#PropertiesId");
      console.log(id.offsetTop);

      window.scrollTo({
        top: id.offsetTop,
        behavior: "smooth",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.w {
  margin: 0 auto;
  width: 1226px;
}
.homeClassify {
   background-color: #ebeef53b;
  .w > div > h3 {
    color: skyblue;
    i {
      margin-right: 5px;
    }
  }
}

// 房屋分类
.classify-card {
  flex-wrap: wrap;
  .el-col-6 {
    margin: 10px;
    &:hover {
      width: 26%;
      box-shadow: 1px;
      box-shadow: 2px 2px 3px 5px rgb(0 0 0 / 10%);
      cursor: pointer;
    }
    .card-item {
      position: relative;
      width: 100%;
      height: 350px;

      // 卡片内容开始
      .card-content {
        position: absolute;
        bottom: 0px;
        left: 5%;
        width: 80%;
        height: 60%;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 5px;
        h3 {
          padding: 0px 10px;
          margin: 10px 0px 10px;
        }
        // 卡片下半部分内容
        .bottom {
          display: flex;
          height: 130px;
          flex-direction: column;
          justify-content: space-between;
          line-height: 12px;
          padding: 0px 10px;
          .attention {
            width: 25px;
            height: 25px;
            background-color: orange;
          }
          p:nth-of-type(1) {
            margin: 0px;
          }
          p:nth-of-type(2) {
            display: flex;
            justify-content: space-between;
            margin: 0px;
            margin-top: 70px;
            span {
              display: flex;
              justify-content: center;
              flex-direction: column;
              text-align: center;
            }
          }
        }
      }
      .image {
        width: 100%;
        height: 250px;
        object-fit: cover;
      }

      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }

      .clearfix:after {
        clear: both;
      }
    }
  }
}

//地产列表
.row-bg {
  .el-col-16 {
    position: relative;
    width: 60%;
    border-radius: 15px;
    margin-bottom: 30px;

    background-position: center;
    background-size: cover;
    &:hover {
      cursor: pointer;
      width: 62%;
      box-shadow: 2px 2px 3px 5px rgb(0 0 0 / 10%);
    }
    img {
      width: 65%;
      height: 300px;
      margin-left: 100px;
      -o-object-fit: contain;
      object-fit: contain;
    }
    .grid-content {
      position: absolute;
      right: 15px;
      top: 30px;
      width: 360px;
      text-align: center;
      background-color: #30313361;
      /* border: 1px solid orange; */
      border-radius: 20px;
      /* box-shadow: 0px 0px 0px 0px #333; */
      color: #fff;
      overflow: auto;
    }
  }
}
.app-bg {
  position: absolute;
  z-index: -999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  margin-bottom: 30px;
  background-image: url("~@/assets/common/房产背景.jpeg");
  background-position: center;
  background-size: cover;
  opacity: 0.5;
}
</style>